<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="flex items-center pb-[50rpx]">
					<view v-if="!uid">
						<button class="loginButton loginButtonimage" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber"><van-image round width="140rpx" height="140rpx"
								src="https://aw2025ht.kangye.xyz/api/profile/upload/tou.jpg" /></button>

					</view>
					<view v-else @click="updateUserInfo">
						<van-image round width="140rpx" height="140rpx"
							src="https://aw2025ht.kangye.xyz/api/profile/upload/tou.jpg" v-if="!login_data.avatar" />
						<van-image round width="140rpx" height="140rpx" :src="login_data.avatar" v-else />
					</view>
					<view v-if="!uid">
						<button class="loginButton" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">登录/注册</button>
					</view>
					<view class="pl-[20rpx] text-[#fff]" v-else @click="updateUserInfo">
						<view class="pb-[28rpx] text-[40rpx]">{{login_data.nikeName}}</view>
						<view class="text-[14px]">{{login_data.phone}}</view>
					</view>
				</view>
				<view class="check-in" v-if="uid">
					<view v-if="isQianDao != '签到'">
						<button class="check-in-btn-jinyong" :disabled="true">已签到<text
								v-if="qianDaoDay != null && qianDaoDay!=''">{{qianDaoDay}}天</text></button>
					</view>
					<view v-else>
						<button class="check-in-btn" @click="dianJiQianDao">{{isQianDao}}</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的预约区域 -->
		<view class="appointment-section">
			<view class="section-header">
				<text class="section-title">我的预约</text>
			</view>
			<view class="appointment-status">
				<view class="status-item" @click="toYuYue(-1)">
					<view class="status-icon">
						<image class="icon-img" src="https://aw2025ht.kangye.xyz/api/profile/upload/ecefd4f71780cfde80cb6db35fc5af2b.png
						" mode="aspectFill"></image>
					</view>
					<text class="status-text">全部预约</text>
				</view>
				<view class="status-item" @click="toYuYue(0)">
					<view class="status-icon">
						<image class="icon-img"
							src="https://aw2025ht.kangye.xyz/api/profile/upload/29d6380831c8664657252d4198e8c02f.png"
							mode="aspectFill"></image>
					</view>
					<text class="status-text">已预约</text>
				</view>
				<view class="status-item" @click="toYuYue(1)">
					<view class="status-icon">
						<image class="icon-img"
							src="https://aw2025ht.kangye.xyz/api/profile/upload/b2c41c0c903148bc4fc97d9bb12b9556.png"
							mode="aspectFill"></image>
					</view>
					<text class="status-text">已核销</text>
				</view>
				<view class="status-item" @click="toYuYue(2)">
					<view class="status-icon">
						<image class="icon-img"
							src="https://aw2025ht.kangye.xyz/api/profile/upload/3db6399dae99bc560df20300c72078ba.png"
							mode="aspectFill"></image>
					</view>
					<text class="status-text">已取消</text>
				</view>
			</view>
		</view>

		<view class="pt-[20rpx]">
			<van-cell-group inset>
				<van-cell title="积分中心" v-if="uid"
					icon="https://aw2025ht.kangye.xyz/api/profile/upload/e3bf7755b84451af4c7148e6f840a4c.png" is-link
					link-type="navigateTo" url="/package/pages/qianDaoYe/qianDaoYe" />
				<van-cell title="消息通知"
					icon="https://aw2025ht.kangye.xyz/api/profile/upload/38d81f064ef8fea08e04d980eb7ab5e.png" is-link
					link-type='navigateTo' url="/packagenew/pages/xiaoXiTongZhi/xiaoXiTongZhi" />
				<van-cell title="意见反馈" v-if="uid"
					icon="https://aw2025ht.kangye.xyz/api/profile/upload/9cfe4b577d7a100f19229801968dbb7.png" is-link
					link-type="navigateTo" url="/packagenew/pages/feedback/feedback" />
				<van-cell title="关于我们"
					icon="https://aw2025ht.kangye.xyz/api/profile/upload/59307b6f27b4551471cbf903095c045.png" is-link
					link-type="navigateTo" url="/packagenew/pages/about/about" />
				<van-cell title="设置中心" v-if="uid"
					icon="https://aw2025ht.kangye.xyz/api/profile/upload/43062d16188ed62ee06653a7170235f.png" is-link
					:border="false" link-type="navigateTo" url="/package/pages/settings/settings" />
			</van-cell-group>
		</view>



	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		passenger
	} from '@/api/index.js'
	import {
		getCode
	} from '@/utils/index.js'
	import {
		setDataWithExpiration,
		getDataWithExpiration
	} from '@/utils/benDiCunChuGuoQiShiJianChuo.js'
	onLoad(() => {
		getCode()
	})
	const uid = ref('')

	const toBalance = () => {
		uni.navigateTo({
			url: '/package/pages/balance/balance'
		})
	}

	const zuoshou = uni.getStorageSync("isQianDao") == null || uni.getStorageSync("isQianDao") == '' ? "签到" : uni
		.getStorageSync("isQianDao");
	const isQianDao = ref(zuoshou);
	const login_data = ref('');

	const zuoshou1 = uni.getStorageSync("qianDaoDay") == null || uni.getStorageSync("qianDaoDay") == '' ? "0" : uni
		.getStorageSync("qianDaoDay");
	const qianDaoDay = ref(zuoshou1);

	const zuoshou2 = uni.getStorageSync("qianDaoJiFen") == null || uni.getStorageSync("qianDaoJiFen") == '' ? "0" : uni
		.getStorageSync("qianDaoJiFen");
	const qianDaoJiFen = ref(zuoshou2);

	const dianJiQianDao = async (e) => {
		// 登陆才可以签到
		let login_data = uni.getStorageSync("login_data");

		if (login_data.type != "login") {
			uni.showToast({
				title: "未登录不能签到",
				icon: "none", // "none" 表示不显示图标
				duration: 2000 // 提示框显示时长（毫秒）
			});
			return;
		}

		// 点击签到按钮
		// 调用签到逻辑,把用户id传送给后台,然后后台调用签到的逻辑,给积分记录添加数据,添加多少积分从积分规则找

		// 发送请求到后台
		console.log("阿斯蒂芬123321");
		// let data = await passenger.qianDao();
		console.log("tianShu:", qianDaoDay.value)
		let data = await passenger.qianDaos(qianDaoDay.value); // 把天数传过去。
		if (data != null && data.data != null && data.data == '签到成功') {
			isQianDao.value = "已签到";
			uni.setStorageSync("isQianDao", "已签到")
			qianDaoDay.value = Number(qianDaoDay.value) + 1;
			uni.setStorageSync("qianDaoDay", qianDaoDay.value)
			//点击签到的时候，签到积分重新查询，重置一下。
			// 修改本地存储添加的积分数量
			// TODO:以后修改签到积分逻辑的时候，修改这里
			qianDaoJiFen.value = Number(qianDaoJiFen.value) + Number(qianDaoDay.value);
			uni.setStorageSync("qianDaoJiFen", qianDaoJiFen.value);

			uni.showToast({
				title: data.data,
				icon: "none", // "none" 表示不显示图标
				duration: 2000 // 提示框显示时长（毫秒）
			});
			return;
		} else {

		}



	}


	const dianJiQianDao1 = () => {
		// 点击签到按钮，跳转签到页面

		uni.navigateTo({
			url: "/pages/qianDaoYe/qianDaoYe"
		})
	}






	//手机号验证
	const getPhoneNumber = async (e) => {
		// console.log(e, 123)
		try {
			let codeResult = await getCode();
			console.log(e.detail.code) // 动态令牌
			console.log(e.detail) // 回调信息（成功失败都会返回）
			console.log(e.detail.errno) // 错误码（失败时返回）
			if (e.detail.errMsg == "getPhoneNumber:ok") {
				let res = await passenger.login({
					sessionKey: codeResult.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				});
				uid.value = res.data.uid
				login_data.value = res.data
				console.log("登陆成功，先看一下返回的数据吧！", res.data)
				console.log("登陆成功，先看一下返回的数据吧！", res.data.isQianDao)
				uni.setStorageSync('userPhone', res.data.phone)
				uni.setStorageSync('drivertoken', res.data.token)
				uni.setStorageSync('token', res.data.token)
				isQianDao.value = res.data.isQianDao;
				uni.setStorageSync("isQianDao", res.data.isQianDao)
				qianDaoJiFen.value = res.data.qianDaoJiFen;
				uni.setStorageSync("qianDaoJiFen", res.data.qianDaoJiFen);
				qianDaoDay.value = res.data.qianDaoDay;
				uni.setStorageSync("qianDaoDay", res.data.qianDaoDay)

				uni.setStorageSync('login_data', res.data);

				setDataWithExpiration('todayData', true)

				// 登陆成功判断是否有人邀请。如果有则，加积分，和上面调用同一个方法就好
				if (uni.getStorageSync("yuid") != null && uni.getStorageSync("yuid") != -1) {
					await passenger.updateUserYaoQingJiFen(params.userId)
					uni.setStorageSync("yuid", -1)
				}

			}
		} catch (error) {
			console.log(error, 'error');
			//TODO handle the exception
		}
	}
	onShow(() => {
		isQianDao.value = uni.getStorageSync("isQianDao");
		qianDaoDay.value = uni.getStorageSync("qianDaoDay");
		login_data.value = uni.getStorageSync('login_data')
		uid.value = login_data.value.uid;
		console.log("看一下login的数据把——", login_data.value)
	})
	const updateUserInfo = () => {
		//修改资料跳转
		uni.navigateTo({
			url: '/packagenew/pages/updateUserInfo/updateUserInfo'
		})
	}

	const toYuYue = (type) => {

		const todayData = getDataWithExpiration('todayData')
		if (todayData) {
			// 点击签到按钮，跳转签到页面
			uni.setStorageSync("typeId", type)
			console.log(type)
			console.log(uni.getStorageSync("typeId"))
			uni.navigateTo({
				url: "/package/pages/myAppointment/myAppointment"
			})
		} else {
			console.log("-----")
			uni.showToast({
				title: "未登录不能进行查看预约",
				icon: "none", // "none" 表示不显示图标
				duration: 2000 // 提示框显示时长（毫秒）
			});
		}
	}
</script>

<style>
	.pt--20rpx- {
		padding: 0 20px 0 20px;
	}


	.loginButton {
		background: transparent;
		color: #fff;
	}

	.loginButton::after {
		border: none;
	}

	.loginButtonimage {
		padding: 0rpx !important;
	}

	.wxbutton {
		width: 100%;
		height: 100%;
		background-color: transparent;
		text-align: left;
		padding-left: 0rpx !important;
		font-size: 34rpx;
		color: #323233;
	}

	.wxbutton::after {
		border: none;
	}

	.container {
		width: 100%;
		/* min-height: 100vh; */
		/* background-color: #f2f4f7; */
		padding: 0;
		margin: 0;
	}

	/* 头部区域样式 */
	.header {
		width: 100%;
		/* background-color: #1a6cdb; */
		padding: 0;
		margin: 0;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 35rpx 40rpx;
		padding-bottom: 0;
	}

	.user-avatar {
		margin-right: 20px;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #ddd;
	}

	.login-section {
		flex: 1;
		text-align: center;
	}

	.login-title {
		color: white;
		font-size: 24px;
		margin-bottom: 5px;
	}

	.login-subtitle {
		color: white;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.check-in {
		margin-left: 20px;
	}

	.check-in-btn {
		background-color: #ffb759;
		color: white;
		border: none;
		border-radius: 40rpx;
		height: 31px;
		line-height: 31px;
		padding: 0px 28rpx;
		font-size: 28rpx;
	}

	.check-in-btn-jinyong {
		background-color: #9e4c08;
		color: white;
		border: none;
		border-radius: 20px;
		/* padding: 16rpx 40rpx;*/
		font-size: 14px;
	}

	/* 我的预约区域样式 */
	.appointment-section {
		background-color: white;
		border-radius: 12rpx;

		margin: 20px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.section-header {
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.appointment-status {
		display: flex;
		justify-content: space-between;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
	}

	.status-icon {
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin-bottom: 10px; */
	}

	.icon-img {
		width: 40px;
		height: 40px;
	}

	.status-text {
		font-size: 14px;
		color: #666;
	}

	/* 功能列表区域样式 */
	.function-section {
		background-color: white;
		border-radius: 20px;
		margin: 20px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.function-item {
		display: flex;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.function-icon {
		margin-right: 15px;
	}

	.function-text {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	.arrow-right {
		color: #999;
	}
</style>